<template>
<el-dialog title="搜索复制" :data="visible" :visible.sync="visible" :show-close="false" width="1000px" :modal="true" :close-on-click-modal="false" :close-on-press-escape="false">    
    <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
      
    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
      
    <div class="filter-container">
      <el-radio-group v-model="search.types" size="medium" class="filter-item">
        <el-radio label="1" border>搜索名称</el-radio>
        <el-radio label="2" border>搜索类型</el-radio>
      </el-radio-group>
      <el-row>
        <el-col :span="5">
          <el-select v-model="search.to_unit" filterable placeholder="根据站点选择" @visible-change='showSelect'>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in outletOptions" :key="item.id" :label="item.hotel_name" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="19">
          <el-input type="textarea" class="filter-item" placeholder="按商品名称搜索时,如有多个商品用 | 隔开,如: 鸡蛋|可乐 (最多10个关键词)" v-model="search.product_name" @keyup.enter.native="handleFilter"></el-input>
        </el-col>
      </el-row>
      <el-radio-group v-model="is_link" @change="selectIsLink">
        <el-radio :label="1">商品独立</el-radio>
        <el-radio :label="2">共用商家</el-radio>
      </el-radio-group>
      <br/>
      <br/>
      <el-button class="filter-item" type="primary" plain v-waves icon="el-icon-search" @click="handleFilter">搜索商品</el-button>
     </div>
    <!-- // 翻页 -->
    <div class="pagination-container" v-if="listData.length>1">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- // 这是搜索得到的列表 -->
    <div style="margin-top: 20px;margin-bottom:10px" v-if="listData.length>7">
        <el-button icon="el-icon-close" type="info" @click="toggleSelection()">取消选择</el-button>
        <el-button icon="el-icon-download" v-if="multipleId.length<=0 || is_link==''" >复制已选商品</el-button>
        <el-button icon="el-icon-download" :loading="saveLoading" type="primary" v-else @click="copyProductBtn()">复制已选商品</el-button>
    </div>
    <el-table ref="multipleTable"  :data="listData" v-loading="listLoading"  tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" @row-click="handrowcheck">
        <el-table-column type="index"  align="center" label="序号" width="80"></el-table-column>
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column align="center" label="商品图片">
            <template slot-scope="scope">
            <span><img :src="scope.row.thumb" style="width:40px;height:40px" onerror='this.src="http://wx.qlogo.cn/mmopen/C2rEUskXQiblFYMUl9O0G05Q6pKibg7V1WpHX6CIQaic824apriabJw4r6EWxziaSt5BATrlbx1GVzwW2qjUCqtYpDvIJLjKgP1ug/0"' /></span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称">
            <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="参考价">
            <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="商品类型">
            <template slot-scope="scope">
            <span>{{scope.row.category_name}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="商品描述">
            <template slot-scope="scope">
            <span>{{scope.row.describe}}</span>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
        <el-button icon="el-icon-close" type="info" @click="toggleSelection()">取消选择</el-button>
        <el-button icon="el-icon-download" v-if="multipleId.length<=0 || is_link ==''" >复制已选商品</el-button>
        <el-button icon="el-icon-download" :loading="saveLoading" type="primary" v-else @click="copyProductBtn()">复制已选商品</el-button>
    </div>
</el-dialog>
</template>

<script>

import * as api from '@/api/main-api' // API
import waves from '@/directive/waves' // 水波纹指令
import { mapGetters } from 'vuex'

export default {
  name: 'copyProduct',

  directives: {
    waves
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      // 搜索字段
      search: {
        product_name: '',
        types: '1',
        to_unit: ''
      },
      listQuery: {
        page: 1,
        pagesize: 10
      },

      total: 0,
      listLoading: false,
      listData: [],
      multipleId: [],
      saveLoading: false,
      outletOptions: [],
      is_link: ''
    }
  },

  computed: {
    ...mapGetters(['outlet_id'])
  },

  // 触动方法
  methods: {

    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      this.$emit('update:visible', false)
    },

    // 搜搜
    handleFilter() {
      this.listQuery = Object.assign(this.listQuery, this.search)
      this.fetchData()
    },
    // 控制每页调数
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.fetchData()
    },

    // 跳页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },

    // 多选框选择数据
    handleSelectionChange(val) {
      this.multipleId = []
      val.forEach(row => {
        this.multipleId.push(row.id)
      })
    },

    // 复制提交数据
    copyProductBtn() {
      if (this.multipleId.length > 0) {
        var ids = this.multipleId.join(',')
        // api
        var postData = { product_ids: ids, unit_id: this.outlet_id, is_link: this.is_link }
        this.saveLoading = true
        api.copyProductApi(postData).then(response => {
          if (response.data.code === 0) {
            this.$root.message('复制成功', 'success')
            setTimeout(() => {
              this.cancelModal() // 关闭弹框
              this.$emit('refresh', true)
            }, 20)
          }
        })
        this.saveLoading = false
      }
    },

    // 这里是取消所有选择
    toggleSelection() {
      this.$refs.multipleTable.clearSelection()
    },

    // 点击行选中状态,在点击则取消
    handrowcheck(v) {
      this.$refs.multipleTable.toggleRowSelection(v)
    },

    // 获取数据
    fetchData() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        api.searchProductApi(this.listQuery).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
            this.total = parseInt(response.data.total)
          }
          this.listLoading = false
        })
      })
    },

    // 获取选择营业点列表
    outleList() {
      api.selectOutleApi().then(response => {
        if (response.data.code === 0) {
          this.outletOptions = response.data.data
        }
      })
    },

    // 站点搜索
    showSelect(val) {
      if (val) {
        this.outleList()
      }
    },

    selectIsLink(val) {

    }
  }
}
</script>
